<template>
<div class="mt-auto">
      <div class="w-full h-2 ">
        <div
          class="h-full bg-green-500 transition-all duration-300"
          :style="{ width: ratio + '%' }"
        ></div>
      </div>
    </div>
</template>

<script setup lang="ts">

import { watch } from 'vue';
import { useCourseStore } from '~/stores/course';
const courseStore = useCourseStore();

const ratio =ref(0)


watch(
  () => courseStore.currentIndex,
  (newValue) => {
    if (newValue) {
      ratio.value = courseStore.computerRatio()
    }
  }
);




</script>